<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>分步表单</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__ROOT__/layui/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="__ROOT__/layui/css/public.css" media="all">
    <link rel="stylesheet" href="__ROOT__/layui/js/lay-module/step-lay/step.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <div class="layui-fluid">
            <div class="layui-card">
                <div class="layui-card-body" style="padding-top: 40px;">
                    <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
                        <div carousel-item>
                            <div>
                                <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">项目编号:</label>
                                        <div class="layui-input-block">
                                            <input type="text" placeholder="项目编号" name="num" class="layui-input" lay-verify="num" value="{$list.num}" readonly />
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">主要技术（必填）:</label>
                                        <div class="layui-input-block">
                                            <input type="text" placeholder="请填写主要技术人员手机号" value="{$list.developerId}" name="id1" id="demo1" class="layui-input" lay-verify="" required>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">辅助技术（选填）:</label>
                                        <div class="layui-input-block">
                                            <input type="text" placeholder="请填写辅助技术人员手机号（没有可以不填）" value="{$list.developerId1}" name="id2" class="layui-input" lay-verify="" required>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">备注说明:</label>
                                        <div class="layui-input-block">
                                            <textarea placeholder="客服备注" name="admin_beizhu" class="layui-textarea">{$list.admin_beizhu}</textarea>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button class="layui-btn" lay-submit lay-filter="formStep">
                                                &emsp;确定提交&emsp;
                                            </button>
                                            <button type="button" class="layui-btn layui-btn-primary next">下一步</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div>
                                <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">项目编号:</label>
                                        <div class="layui-input-block">
                                            <input type="text" placeholder="项目编号" name="num" class="layui-input" lay-verify="num" value="{$list.num}" readonly />
                                        </div>
                                    </div>


                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button type="button" class="layui-btn layui-btn-primary pre" style="margin-top: 20px">上一步</button>
                                            <button class="layui-btn" lay-submit lay-filter="formStep2" style="margin-top: 20px">
                                                &emsp;确认设置为售后阶段&emsp;
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div>
                                <div style="text-align: center;margin-top: 20px">
                                    <form class="layui-form" style="margin: 0 auto;max-width: 460px;margin-top: 10px">
                                        <input type="text" placeholder="项目编号" name="num" class="layui-input" lay-verify="num" value="{$list.num}" readonly  />
                                       
                                        <div class="layui-form-item">
                                            <button class="layui-btn" lay-submit lay-filter="formStep3" style="margin-top: 20px">
                                                &emsp;确定设置为已完成&emsp;
                                            </button>
                                        </div>


                                    </form>

                                </div>
                            </div>
                            <div>
                                <div style="text-align: center;margin-top: 20px">
                                    <form class="layui-form" style="margin: 0 auto;max-width: 460px;margin-top: 10px">

                                        <i class="layui-icon layui-circle"
                                           style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;">&#xe605;</i>
                                        <div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
                                            项目已顺利完成
                                        </div>

                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>
<script src="__ROOT__/layui/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="__ROOT__/layui/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use([ 'form', 'step', 'tableSelect'], function () {
        var $ = layui.$,
            form = layui.form,
            step = layui.step,
            tableSelect = layui.tableSelect;

        step.render({
            elem: '#stepForm',
            filter: 'stepForm',
            width: '100%', //设置容器宽度
            stepWidth: '750px',
            height: '500px',
            stepItems: [{
                title: '设置为正在开发中'
            }, {
                title: '设置为售后阶段'
            }, {
                title: '设置为已完成'
            }, {
                title: '顺利完成'
            }
            ],

        });
        var state = "{$list.state}";
        if(state=='开发中'){
            step.next('#stepForm');
        }
        if(state=='售后中'){
            step.next('#stepForm');
            setTimeout(function () {
                step.next('#stepForm');
            }, 500);

        }
        if(state=='已完成'){
            step.next('#stepForm');
            setTimeout(function () {
                step.next('#stepForm');
            }, 500);
            setTimeout(function () {
                step.next('#stepForm');
            }, 1000);

        }

        form.on('submit(formStep)', function (data) {
            var url = "{:url('order/up_step')}";
            var data=(data.field);

            //    执行异步请求 ，$.post
            $.post(url,data,function(result){
                if(result.status ==0){
                    layer.open({
                        content:result.message,
                        icon:2,
                        title : '错误提示'
                    });

                }
                if(result.status ==1){
                    layer.open({
                        content : result.message,
                        icon : 1,
                        yes : function(){
                            step.next('#stepForm');
                            setTimeout(function () {
                                window.parent.location.reload(); //刷新父页面
                                var index = parent.layer.getFrameIndex(window.name)
                                parent.layer.close(index);
                            }, 1000);
                        }
                    });

                }

            },'JSON');
            return false;
        });

        form.on('submit(formStep2)', function (data) {
            var url = "{:url('order/up_step1')}";
            var data=(data.field);

            //    执行异步请求 ，$.post
            $.post(url,data,function(result){
                if(result.status ==0){
                    layer.open({
                        content:result.message,
                        icon:2,
                        title : '错误提示'
                    });

                }
                if(result.status ==1){
                    layer.open({
                        content : result.message,
                        icon : 1,
                        yes : function(){
                            step.next('#stepForm');
                            setTimeout(function () {
                                window.parent.location.reload(); //刷新父页面
                                var index = parent.layer.getFrameIndex(window.name)
                                parent.layer.close(index);
                            }, 1000);
                        }
                    });

                }

            },'JSON');
            return false;
        });

        form.on('submit(formStep3)', function (data) {
            var url = "{:url('order/up_step2')}";
            var data=(data.field);

            //    执行异步请求 ，$.post
            $.post(url,data,function(result){
                if(result.status ==0){
                    layer.open({
                        content:result.message,
                        icon:2,
                        title : '错误提示'
                    });

                }
                if(result.status ==1){
                    layer.open({
                        content : result.message,
                        icon : 1,
                        yes : function(){
                            step.next('#stepForm');
                            setTimeout(function () {
                                window.parent.location.reload(); //刷新父页面
                                var index = parent.layer.getFrameIndex(window.name)
                                parent.layer.close(index);
                            }, 1000);
                        }
                    });

                }

            },'JSON');
            return false;
        });

        $('.pre').click(function () {
            step.pre('#stepForm');
        });

        $('.next').click(function () {
            step.next('#stepForm');
        });


    })
</script>
</body>
</html>